@charset "utf-8";

@mixin img(){
    width: 100%;
    height: 100%;
}
header{
    .tel{
        img{
            width: 100% !important;
            height: 72px !important;
        }
    }
}
.title{
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #dfdfdf;
    p{
        width: 800px;
        font-size: 13px;
        float: left;
        line-height: 60px;
        position: relative;
        left: 178px;
        bottom: 20px;
        span{
            a{
                color:#444f58;
            }
        }
        strong{
            a{
                color: #99999a;
            }
        }
    }
}

section
{
    width: 1000px;
    margin: 0 auto 40px;
    p{
        margin-bottom: 0;
    }
    .shop{
        position: relative;
        width: 50%;
        #div{
            position: relative;
            width: 304px;
            height: 405px;
            left:98px;
        }
        div{
            width: 100%;
            height: 405px;
            .mark{
                width:304px; 
                height:405px;
                position:absolute; 
                z-index:2;
                left: 0;
                top:0px;
                background:red;
                opacity:0
            }
             .float_layer { 
                 width: 50px; 
                 height: 50px;
                 background: #fff;
                 position: absolute;
                 top: 0; 
                 left: 0; 
                 background:url(../img/shopinfo/time.png) no-repeat;
                 background-size:50px ;
                 display:none;
            }
            img{
                display: block;
                margin: 0 auto;
                z-index: 1;
            }
        }
        .big_pic{
            position: absolute;
            width: 300px;
            height: 400px;
            overflow: hidden;
            right: -398px;
            top: 80px;
            display: none;
            z-index: 999;
            border: 3px solid #b42f2f;
            transition: 0.8s;
            img{
                width: 600px;
                position: relative;
                top:-90px;
            }
        }
        p{
            span{
                a{
                font-size: 12px;
                color: #878787;
                }
            }
        }
    }
    .shopinfo{
        width: 492px;
        span{
            font-size: 13px;
            color: #878787;
            line-height: 40px;
        }
        p{
            width: 482px;
            font-size: 20px;
            color: #444f58;
            line-height: 30px;
            margin-top: 18px;
            &:nth-of-type(2){
                margin-top: 0;
            }
            span{
                font-size: 16px;
                color: #878787;
                &:nth-of-type(3){
                    padding-left: 50px;
                }
                &:last-of-type{
                    font-size:26px ;
                    color: #eb413d;
                }
            }
        }
         .infomation{
            border-top:1px solid #efefef;
            border-bottom:1px solid #efefef;
            div{
                 margin-bottom: 5px;
            }
            .add{margin-top: 18px;}
        .address{
            width: 138px;
            height: 40px;
            border-radius: 4px;
            border: 1px solid #e7e7e7;
            cursor: pointer;
            margin-left: 20px;
            div{
                &:nth-of-type(1){
                    width:99px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    font-size: 13px;
                    color: #444f58;
                    border-right:1px solid #e7e7e7;
                }
                &:nth-of-type(2){
                    width:38px;
                    height: 40px;
                    position: relative;
                    img{
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                    }
                }
            }
        }
        .sex{
            width: 98px;
            height: 40px;
            border-radius: 4px;
            border: 1px solid #e7e7e7;
            cursor: pointer;
            margin-left: 33px;
             div{
                    margin-bottom: 0;
                &:nth-of-type(1){
                    width:59px;
                    height: 40px;
                    border-right:1px solid #e7e7e7;
                    img{
                        margin-left: 8px;
                    }
                }
                &:nth-of-type(2){
                    width: 37px;
                    height: 40px;
                    position: relative;
                    img{
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                    }
                }
            }
        }
        .size{
            margin-bottom: 11px;
            ul{
                margin-left: 33px;
                li{
                    float: left;
                    width: 56px;
                    height: 38px;
                    border:1px solid #e7e7e7;
                    line-height: 38px;
                    text-align:center; 
                    cursor:pointer;  
                    margin-right:12px; 
                    &:hover,&.active{
                        border-color: #eb413d;
                        span{
                            color: #eb413d;
                        }
                    }
                }
            }
        }
        .num{
            width: 96px;
            height: 28px;
            border: 1px solid #e7e7e7;
            cursor: pointer;
            margin-left: 33px;
            li{
                float: left;
                &:nth-of-type(1),&:nth-of-type(3){
                    width: 28px;
                    height: 28px;
                    input{
                        width: 100%;
                        height: 100%;
                        color: #444f58;
                        background: transparent;
                    }
                }
                &:nth-of-type(2){
                    width: 38px;
                    height: 28px;
                    text-align: center;
                    border-left: 1px solid #e7e7e7;
                    border-right: 1px solid #e7e7e7;
                    span{
                        line-height: 28px;
                    }
                }
            }
        }
        }
        .shopbtn{
        input[type='button']{
            width: 140px;
            height: 50px;
            margin-right:10px; 
            line-height: 50px;
            border: 1px solid #eb413d;
            background: white;
            border-radius: 22px;
            color: #eb413d;
            &:hover,&.active{
                background: #eb413d;
                color: white;
            }
        }
        input[type='image']{
            border-radius: 22px;
            position: relative;
            top: 20px;
        }
        span{
            a{
                font-size: 13px;
                color: #878787;
            }
        }
        }
        .serve{
            margin-top: 20px;
            label{
                font-size: 13px;
                color: #878787;
                margin-top: 12px;
            }
            ul{
                margin-left: 20px;
                width: 330px;
                li{
                    height: 30px;
                    float: left;
                    margin-right: 6px;
                }
            }
        }
    }
    
    .productCar{
        width: 1000px;
        text-align: center;
        border-bottom:1px solid #e7e7e7 ;
        .title{
            padding-top: 20px;
            font-size: 20px;
            color: #444f58;
            text-align: left;
            border-top:1px solid #e7e7e7 ;
            margin-top: 40px;
            border-bottom: none;
        }
        .product-shopCar{
            width: 100%;
            height: 140px;
            margin-bottom:30px;
            .left,.right{
                width: 6%;
                 position: relative;
                 top: 40px;
            }
            .left{
                left:-10px;
            }
            .right{
                right:-10px;
            }
            .moveul{ 
                width: 88%;
                height: 140px;
                overflow: hidden;
                position: relative;
                }
            .pro-shop1{
                position: absolute;
                left: 0;
                li{
                    width: 220px;
                    height: 140px;
                    float: left;
                    &:nth-child(4n){
                        border-right: none;
                    }
                    div{
                        width: 50%;
                        height: 120px;
                        overflow: hidden;
                    }
                    div:nth-of-type(2){
                        img{
                            margin: 0;
                        }
                    }
                    p{
                        font-size: 14px;
                        color: #444f58;
                        padding-bottom: 22px;
                        text-align:left; 
                        white-space:nowrap ;
                        margin-bottom: 0;
                        text-overflow:ellipsis;
                        overflow:  hidden;
                        &:nth-of-type(1){
                            margin-top: 30px;
                        }
                        &:nth-of-type(2){
                            font-size: 14.91px !important;
                            padding-top: 9px;
                        }
                    }
                    img{
                        display: block;
                        margin: 0 auto;
                    }
                }
                }
        }
    }
    .shop-infomation{
         .pro-title{
             margin-top: 30px;
            margin-right: 80px;
            margin-bottom: 28px;
            h4{
                font-size: 16px;
                
                line-height: 32px;
                a{
                    color: #444f58;
                    &:hover,&.active{
                        color: #eb413d;
                    }
                }
            }
            span{
                display: block;
                width: 25px;
                height: 3px;
                background:#eb413d ;
                margin: 10px auto 0;
            }
        }
        .for{
            display: none;
            .left{
                width: 790px;
                height: 307px;
                background: #f3f3f3;
            }
            .right{
                width: 200px;
                height: 306px;
                border: 1px solid #dee0e2;
                img{
                    @include img();
                }
            }
        }
        .evaluate{
            .left{
                width: 790px;
                border-top: 1px solid #efefef;
                .num{
                    .good{
                        text-align: center;
                        p:nth-of-type(1){
                            font-size: 48px;
                            color: #eb413d;
                            span{
                                font-size: 28px;
                            }
                        }
                        p:nth-of-type(2){
                            font-size: 13px;
                            color: #878787;
                        }
                    }
                    .bad{
                        margin-left: 30px;
                        margin-top: 10px;
                        div{
                            span{
                                font-size: 13px;
                                color: #878787;
                            }
                            div{
                                width: 206px;
                                height: 18px;
                                display: inline-block;
                                background: #efefef;
                                position: relative;
                                top: 2px;
                                color: white;
                                text-align: center;
                                font-size: 12px;
                                &.active{
                                    background: #eb413d;
                                }
                            }
                        }
                    }
                }
                 .list{
                        width: 788px;
                        height: 40px;
                        margin-top: 40px;
                        background: #f7f7f7;
                        border: 1px solid #efefef;
                        li{
                            width: 108px;
                            line-height: 40px;
                            float: left;
                            margin-right: 10px;
                            cursor:pointer; 
                            &:first-of-type{
                                margin-left: 20px;
                                margin-right: 20px;
                            }
                            span{
                                font-size: 13px;
                                color: #878787;
                            }
                            &.active,&:hover{
                                span{
                                    color: #eb413d;
                                }
                            }
                        }
                    }
                    .ev{
                        p{
                            line-height: 40px;
                            span{
                                font-size: 13px;
                                 color: #878787;
                            }
                        }
                        li{
                            border-bottom: 1px solid #efefef;
                            .user{
                                text-align: center;
                                div{
                                    width: 48px;
                                    height: 48px;
                                    border-radius:50% ;
                                    overflow: hidden;
                                    margin-top: 24px;
                                    margin-bottom: 12px;
                                    img{
                                        @include img();
                                    }
                                }
                                p{
                                    font-size: 13px;
                                    color: #878787;
                                }
                            }
                            .evaluate-info{
                                margin-left: 44px;
                                ul:first-of-type{
                                    li{
                                        margin-left: 2px;
                                        margin-top: 20px;
                                    }
                                }
                                p:first-of-type{
                                    width: 698px;
                                    font-size: 13px;
                                    color: #878787;
                                    line-height: 44px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                 }
                                 ul:last-of-type{
                                     li{
                                         width: 58px;
                                         height: 58px;
                                         border: 1px solid #efefef;
                                         overflow: hidden;
                                         margin-right: 8px;
                                         img{
                                             @include img();
                                         }
                                     }
                                 }
                            }
                        }
                    }
                        .page{
        width: 960px;
        margin:20px auto 0;
        .link{
            width: 445px;
            li{
                float: left;
                width: 36px;
                height: 36px;
                border: 1px solid #e7e7e7;
                margin-right: 9px;
                line-height:36px; 
                position:relative; 
                border-radius:2px; 
                &:hover,&.active{
                    border-color: #eb413d;
                }
                &:last-child{
                    margin-right: 0;
                }
                &:nth-last-child(2){
                    width: 66px;
                    height: 36px;
                }
                &:nth-child(5){
                    button{
                        font-weight: bold;
                    }
                }
                &:nth-child(5),&:nth-child(7){
                    border: none;
                }
                input{
                    position: absolute;
                    top: 0;
                    text-indent: 8px;
                    width: 36px;
                    height: 36px;
                    border-radius:2px; 
                    border: none;
                }
                button{
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;
                     border-radius:2px; 
                    background: white;
                    color: #444f58;
                    font-size: 13px;
                    &:focus{
                        outline: none;
                    }
                }
                span{
                    color: #444f58;
                    font-size: 13px;
                }
                
            }
        }
    }
            }
            .right{
                width: 200px;
                height: 306px;
                border: 1px solid #dee0e2;
                img{
                    @include img();
                }
            }
        }
        
       }
}

       .customer{
           width: 100%;
           height: 128px;
           background: #f8f8f8;
           ul{
               width: 1000px;
               height: 58px;
               margin: 0 auto;
               padding-top: 38px;
           li{
               width: 180px;
               height: 58px;
               float: left;
               margin-right: 20px;
               &:last-child{
                   margin-right: 0;
               }
               span{
                   font-size: 16px;
                   color: #878787;
                   display: inline-block;
                   line-height: 58px;
                   margin-left: 10px;
               }
           }
           }
       }
       footer{
    
     .list .foot-list{
        width: 449px;
        height: 96px;
    } 
    a:hover{
        text-decoration: none;
    }
}